$(document).ready(function () {

    /**
     * 课程展示
     * @type {Vue}
     */
    var courses = new Vue({
        el: "#content",
        data: {
            courses: [],        //所有课程数据
            currentPageData: [],    //当前页显示内容
            totalPage:1,        //页面数量
            currentPage:1,      //当前页号
            pageSize: 8     //每一页显示数据量
        },
        created: function () {
            this.getCourses();

        },
        methods: {
            getCourses: function () {
                var that = this;
                axios.get("http://39.108.233.68:8002/course/selAllCourse").then(
                    function (response) {

                        console.log(response.data.data);
                        that.courses = response.data.data;
                        for (var i = 0; i < response.data.data.length; i++) {
                            if (response.data.data[i].image === null)
                                response.data.data[i].image = "img/noPic.jpg";
                            else
                                response.data.data[i].image = "https://www.luckyone.club/software/lesson/" + that.courses[i].image;
                            //console.log(that.courses[i].image);
                        }
                        //计算一共有多少页
                        that.totalPage = Math.ceil(that.courses.length / that.pageSize);
                        //当计算结果为0时设置页号为1
                        that.totalPage = that.totalPage === 0 ? 1 : that.totalPage;
                        that.setCurrentPageData();
                        console.log(that.currentPageData);

                        /*上一页*/
                        $("#prev").click(function () {
                            console.log(that.currentPage);
                            if (that.currentPage === 1)
                                return;
                            that.currentPage--;
                            that.setCurrentPageData();
                        });

                        /*下一页*/
                        $("#next").click(function () {
                            console.log(that.currentPage);
                            if (that.currentPage === that.totalPage)
                                return;
                            that.currentPage++;
                            that.setCurrentPageData();
                        });

                    }
                )
            },
            setCurrentPageData: function () {
                let begin = (this.currentPage - 1)* this.pageSize;
                let end = this.currentPage * this.pageSize;
                this.currentPageData = this.courses.slice(begin, end);
            },
            onclick: function (courseInfo) {
                console.log(courseInfo);
                window.localStorage.setItem("id", courseInfo.id);
                window.location.href = "front_course.html";
            }
        }
    });




    /**
     * 课程查询
     */
    $("#searchBtn").on("click", function (event) {


        var courseName = $("#courseName").val();
        var belong = $("#belong option:selected").val();
        var courseDiv = $("#courseDiv option:selected").val();
        window.localStorage.setItem("courseName", courseName);
        window.localStorage.setItem("belong", belong);
        window.localStorage.setItem("courseDiv", courseDiv);
        window.location.href = "front_courseList1.html";
        /*var search = new Vue({
            el: "#search",
            data: {
                courseName: courseName,
                belong: belong,
                courseDiv: courseDiv,
                courses: [],        //所有课程数据
                currentPageData: [],    //当前页显示内容
                totalPage:1,        //页面数量
                currentPage:1,      //当前页号
                pageSize: 8     //每一页显示数据量
            },
            created: function () {
                this.getSearchCourse();
            },
            methods: {
                getSearchCourse: function () {
                    var that = this;
                    axios.get("http://39.108.233.68:8002/course/selByBasic?courseName=" + that.courseName + "&belong=" + that.belong + "&courseDiv=" + that.courseDiv).then(
                        function (response) {
                            console.log(response);
                            console.log(response.data.data);
                            that.courses = response.data.data;
                            for (var i = 0; i < response.data.data.length; i++) {
                                if (response.data.data[i].image === null || i === 5)
                                    that.courses[i].image = "img/noPic.jpg";
                                else
                                    that.courses[i].image = "https://www.luckyone.club/software/lesson/" + that.courses[i].image;
                            }

                            let selectedCourse = that.courses;
                            self.course = selectedCourse;
                            that.currentPageData = self.course;
                            /!*window.localStorage.setItem("courseName", that.currentPageData[i].name);
                    window.localStorage.setItem("courseDeptName", that.currentPageData[i].deptName);
                    window.localStorage.setItem("courseCotypeName", that.currentPageData[i].cotypeName);
                    window.localStorage.setItem("courseTetyName", that.currentPageData[i].tetyName);
                    window.location.href = "front_courseList1.html";*!/

                            /!*$("#a").remove();
                            $("#content").innerHTML = "<div class=\"div-relative\">\n" +
                                "            <div class=\"bg1\" :style=\"{backgroundImage: 'url(' + item.image + ')', backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center center'}\"></div>\n" +
                                "            <div class=\"bg2\"></div>\n" +
                                "            <div class=\"bg3\">\n" +
                                "                <h4>"+ that.courses.name +"</h4>\n" +
                                "                <p>" + that.courses.deptName + "</p>\n" +
                                "                <p>" + that.courses.cotypeName + "</p>\n" +
                                "                <p>" + that.courses.tetyName + "</p>\n" +
                                "            </div>\n" +
                                "        </div>";*!/
                        },
                        function (error) {
                            alert(error + "无此课程");
                        }
                    )
                },
                setCurrentPageData: function () {
                    let begin = (this.currentPage - 1)* this.pageSize;
                    let end = this.currentPage * this.pageSize;
                    this.currentPageData = this.courses.slice(begin, end);
                },
                onclick: function (courseInfo) {
                    console.log(courseInfo);
                    window.localStorage.setItem("id", courseInfo.id);
                    window.location.href = "front_course.html";
                }
            }
        })*/


    })

});
